<html>

<head>
    <title>Highcharts 区间区域</title>
    <meta charset="utf-8">
    <style>
        .container {
            width: 550px;
            height: 400px;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <div class="container"></div>
    <script src="../lib/jquery-3.5.1.min.js"></script>
    <script src="../lib/highcharts.js"></script>
    <script>
        $(function () {
            var chart = {
                type: 'arearange',zoomType: 'x'
            };
            var title = { text: 'Temperature variation by day' };
            var subtitle = { style: { position: 'absolution', right: '0px', bottom: '10px' } };
            var legend = {
                enabled: false
            };
            var xAxis = {
                type: 'datetime'
            };
            var yAxis = {
                title: { text: null }
            };
            var plotOptions = {
                area: {
                    fillOpacity: 0.5
                }
            };
            var credits = { enabled: false }
            // 提示
            var tooltip = { shared: true, crosshairs: true, valueSuffix: '\xB0C' };

            // 数据
            var series = [{
                name: 'John',
                data: [3, 4, 3, 5, 4, 10, 12]
                }, {
                    name: 'Jane',
                    data: [1, 3, 4, 3, 3, 5, 4]
                }
            ];
            var data = {
                chart: chart, title: title, subtitle: subtitle, xAxis: xAxis, yAxis: yAxis, legend: legend,
                tooltip: tooltip, series: series, plotOptions: plotOptions, credits: credits
            };
            $(".container").highcharts(data);
        });
    </script>
</body>

</html>